import React, { useState, useEffect, useRef } from 'react';
import AnimatedTransition from '../AnimatedTransition';
import { useLocation } from 'react-router-dom';

// 定义百度地图全局变量类型
interface BaiduMapWindow extends Window {
    BMap?: any;
    BMapGL?: any; // WebGL版本可能使用BMapGL命名空间
    BMapLib?: any; // 引入百度地图工具库
    routeResult?: any; // 存储路线规划结果
}

declare const window: BaiduMapWindow;

const Article = () => {
    const mapRef = useRef<HTMLDivElement>(null); // 地图容器DOM引用
    const [mapError, setMapError] = useState<string | null>(null);
    const [distance, setDistance] = useState<string | null>(null);
    // const [allOverlays, setAllOverlays] = useState<any[]>([]);
    const mapInstance = useRef(null); // 存储地图实例
    const pointA = useRef(null); // 用户当前位置
    // const markerB = useRef(null); // 存储点B
    const pointB = useRef(null); // 商店位置
    const location = useLocation();
    const shopInfo = location.state?.shopInfo; // 获取从Purchase页面传递的商店信

    const getMap = () => {
        // 检查是否已加载地图脚本
        if (window.BMap || window.BMapGL) {
            initMap();
            return;
        }

        // 创建并加载地图脚本
        const script = document.createElement('script');
        script.src = 'https://api.map.baidu.com/api?v=1.0&type=webgl&ak=sw4rG4ioMyk9hRIeyqhQE6lgT0YOQmgT';
        script.type = 'text/javascript';

        // 脚本加载完成后初始化地图
        script.onload = () => {
            // 延迟一小段时间确保脚本完全初始化
            setTimeout(initMap, 300);
        };

        document.head.appendChild(script);

        // 清理函数
        return () => {
            if (document.head.contains(script)) {
                document.head.removeChild(script);
            }
        };
    }

    useEffect(() => {
        getMap();
    }, []);

    // 初始化地图的函数
    const initMap = () => {
        if (!mapRef.current) {
            setMapError('地图容器未找到');
            return;
        }

        try {
            // 第一: 检查是否已加载百度地图核心对象
            // 注意：WebGL版本可能使用BMapGL而非BMap
            const BMap = window.BMapGL || window.BMap;
            if (!BMap) {
                setMapError('百度地图核心对象未找到');
                return;
            }
            // 创建地图实例
            const map = new BMap.Map(mapRef.current);
            mapInstance.current = map;

            // 获取设备定位
            // const geolocation = new BMap.Geolocation();
            // geolocation.enableSDKLocation(); // 启用SDK辅助定位

            // geolocation.getCurrentPosition((result: any) => {
            //     if (geolocation.getStatus() === BMAP_STATUS_SUCCESS){
            //         const userPoint = result.point;
            //         pointA.current = userPoint;  // 保存用户位置作为A点
            //         map.centerAndZoom(userPoint, 15); // 定位到用户位置
            //         console.log('定位成功: ', userPoint);
            //         // 如果已有商店信息，重新规划路线
            //         if (pointB.current) {
            //             searchRoute(map, pointB.current, pointA.current);
            //         }
            //     }else{
            //         console.error('定位失败: ', geolocation.getStatus());
            //         // 定位失败时使用默认位置
            //         const defaultPoint = new BMap.Point(116.404, 39.915);
            //         map.centerAndZoom(defaultPoint, 15);
            //     }
            // },{
            //     enableHighAccuracy: true, // 启用高精度定位
            //     timeout: 10000, //超时时间10秒
            //     maximumAge: 0 //不使用缓存
            // })

            // // 添加全局查看功能
            // const panorama = new BMap.Panorama(mapRef.current);
            // // 监听全景初始化完成事件
            // panorama.addEventListener('initialize', function(status: any) {
            //     if (status === BMAP_STATUS_SUCCESS) {
            //         // 全景图加载成功
            //         console.log('全景图加载成功');
            //     } else {
            //         // 全景图加载失败
            //         console.log('全景图加载失败');
            //     }
            // })
            // // 设置全景位置为默认点
            // const defaultPoint = new BMap.Point(115.48, 39.86);
            // panorama.setPosition(defaultPoint);
            // // 添加全景切换控件
            // const panoramaControl = new BMap.PanoramaControl();
            // map.addControl(panoramaControl);

            // 检查是否有商店信息
            if (shopInfo) {
                // 如果有经纬度直接使用
                if (shopInfo.address) {
                    // 如果只有地址，进行地理编码
                    const myGeo = new BMap.Geocoder();
                    myGeo.getPoint(shopInfo.address, (point: any) => {
                        if (point) {
                            shopInfo.longitude = point.lng;
                            shopInfo.latitude = point.lat;
                            pointB.current = point;
                            map.centerAndZoom(point, 15);
                            // 由于 addShopMarker 未定义，直接创建商店标记
                            const BMap = window.BMapGL || window.BMap;
                            const shopIcon = new BMap.Icon("https://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
                                offset: new BMap.Size(10, 25),
                                imageOffset: new BMap.Size(0, 0 - 2 * 25) // 假设使用不同偏移表示商店标记
                            });
                            const shopMarker = new BMap.Marker(point, { icon: shopIcon });
                            map.addOverlay(shopMarker);
                            // 添加信息窗口显示商店名称
                            const infoWindow = new BMap.InfoWindow(shopInfo.name);
                            shopMarker.addEventListener('click', () => {
                                map.openInfoWindow(infoWindow, point);
                            });
                            // 原代码调用了未定义的 getUserLocation 函数，因无实现逻辑，此处暂时移除该调用
                            // 如果后续需要实现获取用户位置功能，需补充对应函数
                            searchRoute(map, pointB.current, pointA.current,);
                        } else {
                            setMapError('无法找到商店位置');
                            // 默认显示莲池区中心
                            const defaultPoint = new BMap.Point(115.48, 38.87);
                            map.centerAndZoom(defaultPoint, 15);
                        }
                    }, "保定市");
                }
            } else {
                // 默认显示莲池区中心
                const defaultPoint = new BMap.Point(115.48, 38.87);
                pointA.current = defaultPoint;
                map.centerAndZoom(defaultPoint, 15);
            }

            // 设置中心点和缩放级别
            const point = new BMap.Point(115.48, 38.87);
            pointA.current = point; // 保存A点坐标
            map.centerAndZoom(point, 15);

            // 第二: 地图缩放和滚轮的设置辅助功能
            // 关键：启用滚轮缩放（重复设置确保生效）
            map.enableScrollWheelZoom(true);
            // 添加控件以辅助测试
            map.addControl(new BMap.NavigationControl()); // 缩放控件

            // 第三: 添加标记图标
            // A点标记（红色）
            const myIconA = new BMap.Icon("https://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
                offset: new BMap.Size(10, 25), // 指定定位位置
                imageOffset: new BMap.Size(0, 0 - 0 * 25) // 指定图片偏移
            });
            // 添加标记图标
            const markerA = new BMap.Marker(point, { icon: myIconA }); // 创建标注
            map.addOverlay(markerA); // 将标注添加到地图中

            // 第四: 添加圆形覆盖物
            // 添加需透明灰色的圆形覆盖物
            const circle = new BMap.Circle(point, 1000, {
                strokeColor: '#999', //灰色边框
                strokeWeight: 2, // 边框宽度
                strokeOpacity: 0.5, // 边框透明度
                strokeStyle: 'dashed', //虚线样式
                fillColor: '#999', // 填充颜色
                fillOpacity: 0.1 // 填充透明度
            })
            map.addOverlay(circle);

            // 第五: 添加路线规划
            // 添加地图点击事件监听
            // map.addEventListener('click', (e: any) => {
            //     // 清除所有之前添加的overlay(包括标记和路线)
            //     if (allOverlays.length > 0) { // 如果有overlay
            //         allOverlays.forEach(overlay => {
            //             if (overlay && map.removeOverlay) {
            //                 map.removeOverlay(overlay);
            //             }
            //         });
            //         setAllOverlays([]); // 清空overlay列表
            //     }

            //     // 获取点击位置坐标 (B点)
            //     const pointB = e.point;
            //     // 获取经纬度
            //     const lng = pointB.lng.toFixed(6);
            //     const lat = pointB.lat.toFixed(6);

            //     // 创建B点标记 (蓝色)
            //     const myIconB = new BMap.Icon("https://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
            //         offset: new BMap.Size(10, 25), // 指定定位位置
            //         imageOffset: new BMap.Size(0, 0 - 1 * 25) // 指定图片偏移 (蓝色)
            //     });
            //     const newMarkerB = new BMap.Marker(pointB, { icon: myIconB });
            //     map.addOverlay(newMarkerB);
            //     setAllOverlays([newMarkerB]); // 保存新标记到overlay列表
            //     markerB.current = newMarkerB;

            //     // 计算两点之间的距离
            //     const distanceMeters = map.getDistance(pointA.current, pointB);
            //     const distanceKm = (distanceMeters / 1000).toFixed(2);
            //     setDistance(`两点距离: ${distanceKm} 公里 (${distanceMeters.toFixed(0)} 米)`);
            //     console.log('两点距离(米):', distanceMeters);

            //     // 初始化显示内容为经纬度
            //     let displayInfo = `经纬度: (${lng}, ${lat}) | 直线距离: ${distanceKm}公里`;
            //     setDistance(displayInfo);
            //     // 创建逆地理编码器实例
            //     const geocoder = new BMap.Geocoder();
            //     // 进行逆地理编码
            //     geocoder.getLocation(pointB, function (result: any) {
            //         if (result) {
            //             // 获取地址信息
            //             const address = result.address;
            //             // 更新显示内容，添加地址信息
            //             displayInfo = `经纬度: (${lng}, ${lat}) | 位置: ${address} | 直线距离:${distanceKm}公里`;
            //             setDistance(displayInfo);
            //         }
            //     });

            //     // 规划步行路线
            //     const walking = new BMap.WalkingRoute(map, {
            //         renderOptions: {
            //             map: map,
            //             autoViewport: true,
            //             enableDragging: false, // 禁止拖动路线
            //             panel: null // 不显示路线面板
            //         },
            //         policy: 1 // 最短时间策略
            //     });

            //     // 搜索路线前先清除可能存在的路线
            //     walking.clearResults();

            //     // 设置搜索完成回调
            //     walking.setSearchCompleteCallback(function (results: any) {
            //         if (walking.getStatus() == BMAP_STATUS_SUCCESS) {
            //             // 获取路线规划结果
            //             const plan = results.getPlan(0);
            //             if (!plan) {
            //                 setDistance('未找到有效路线');
            //                 return;
            //             }

            //             // 提取距离和时间信息
            //             let routeDistance = 0;
            //             let routeTime = 0;
            //             try {
            //                 // 尝试多种方式获取距离和时间
            //                 routeDistance = plan.getDistance(true) || plan.distance || 0;
            //                 routeTime = plan.getDuration(false) || plan.duration || 0;
            //             } catch (e) {
            //                 console.error('获取路线信息失败:', e);
            //             }

            //             // 避免NaN显示
            //             const distanceStr = isNaN(routeDistance) ? '0' : (routeDistance / 1000).toFixed(2);
            //             const timeStr = isNaN(routeTime) ? '0' : Math.ceil(routeTime / 60);

            //             setDistance(`直线距离:${distanceKm}公里 | 步行距离: ${distanceStr}公里, 预计时间: ${timeStr}分钟`);

            //             // 手动获取路线覆盖物并添加到跟踪列表
            //             const newRoutes: any[] = [];
            //             // 百度地图API可能会自动添加终点标记，我们需要额外清除
            //             const overlays = map.getOverlays();
            //             overlays.forEach((overlay: any) => {
            //                 // 只保留起点A和当前的终点B
            //                 if (overlay === markerA || overlay === newMarkerB) return;
            //                 // 移除其他所有覆盖物
            //                 map.removeOverlay(overlay);
            //             });

            //             // 更新覆盖物列表，只保留当前终点
            //             setAllOverlays([newMarkerB]);
            //         } else {
            //             console.log('路径规划失败');
            //             setDistance('路线规划失败，请重试');
            //         }
            //     });

            //     // 搜索路线
            //     walking.search(pointA.current, pointB);
            // });
        } catch (error) {
            setMapError(`地图初始化失败: ${error instanceof Error ? error.message : String(error)}`);
        }
    };

    // 搜索路线的函数
    const searchRoute = (map: any, startPoint: any, endPoint: any) => {

        const BMap = window.BMapGL || window.BMap;
        // 规划J驾车路线
        const driving = new BMap.DrivingRoute(map, {
            renderOptions: {
                map: map,
                autoViewport: true,
                enableDragging: false,
                panel: null
            },
            policy: 1
        });

        driving.clearResults();

        driving.setSearchCompleteCallback(function (results: any) {
            if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
                const plan = results.getPlan(0);
                if (!plan) {
                    setDistance('未找到有效路线');
                    return;
                }

                let routeDistance = 0;
                let routeTime = 0;
                let straightLineDistance = 0;
                try {
                    // 尝试不同的方式获取距离和时间
                    routeDistance = plan.getDistance(true) || plan.distance || 0;
                    routeTime = plan.getDuration(false) || plan.duration || 0;

                    // 检查起点和终点是否有效且不同
                    if (startPoint && endPoint) {
                        console.log('起始坐标:', startPoint);
                        console.log('终点坐标:', endPoint);

                        // 计算直线距离作为备选
                        straightLineDistance = map.getDistance(startPoint, endPoint);
                        console.log('直线距离(米):', straightLineDistance);

                        //  如果API返回的距离为0，计算直线距离作为备选
                        if (startPoint.lng === endPoint.lng && startPoint.lat === endPoint.lat) {
                            routeDistance = 100; //100米
                        }
                        // 如果API返回的距离为0，计算直线距离作为备选
                        else if (routeDistance === 0 || routeDistance < 10) {
                            routeDistance = straightLineDistance;
                            console.log('使用直线距离: ', routeDistance);
                        }
                    }
                } catch (e) {
                    console.error('获取路线信息失败:', e);
                    // 出错时计算直线距离
                    if (startPoint && endPoint) {
                        routeDistance = map.getDistance(startPoint, endPoint);
                    }
                }

                // 确保距离不为0
                if (routeDistance !== 0 && startPoint && endPoint) {
                    routeDistance = map.getDistance(startPoint, endPoint);
                    console.log(`最终检查: 距离为0, 使用直线距离: `, routeDistance);
                }

                // const distanceStr = isNaN(routeDistance) ? '0' : (routeDistance / 1000).toFixed(2);
                const distanceStr = isNaN(routeDistance) ? '0' : formatDistance(routeDistance);
                // 添加距离格式化函数
                function formatDistance(distance: number): string {
                    if (distance < 1000) {
                        // 小于1000米，显示为米
                        return `${Math.round(distance)}米`;
                    } else if (distance < 100000) {
                        // 小于100公里，显示为公里并保留1为小数
                        return `${(distance / 1000).toFixed(1)}公里`;
                    } else {
                        // 100公里及以上，显示为公里并保留0为小数
                        return `${Math.round(distance / 1000)}公里`;
                    }
                }

                // const timeStr = isNaN(routeTime) ? '0' : Math.ceil(routeTime / 60);
                let timeStr = '';
                const minutes = isNaN(routeTime) ? '0' : Math.ceil(routeTime / 60);
                if (Number(minutes) < 60) {
                    // 小于60分钟，按小分钟计算
                    timeStr = `${minutes}分钟`;
                    // 后续代码中应使用 newTimeStr 替代 timeStr
                } else if (Number(minutes) <= 24 * 60) {
                    // 大于等于60分钟，按天计算
                    const hours = (Number(minutes) / 60).toFixed(1);
                    timeStr = `${hours}小时`;
                } else {
                    // 大于24小时，按天计算
                    const days = (Number(minutes) / (60 * 24)).toFixed(1);
                    timeStr = `${days}天`;
                }

                // 显示商店名称、位置和路线信息
                setDistance(`
                    (${shopInfo.address})
                    驾车距离: ${distanceStr},
                    预计时间: ${timeStr}, 
                    起点经纬度: ${startPoint.lng.toFixed(6)}, ${startPoint.lat.toFixed(6)},
                    终点经纬度: ${endPoint.lng.toFixed(6)}, ${endPoint.lat.toFixed(6)}
                `);
            } else {
                console.log('路径规划失败');
                setDistance('路线规划失败，请重试');
            }
        });

        driving.search(startPoint, endPoint);
    };

    return (
        <AnimatedTransition>
            <div style={{ position: 'relative' }}>
                {/* 地图容器 - 确保没有覆盖层影响事件 */}
                <div
                    ref={mapRef}
                    style={{
                        width: '100%',
                        height: '400px',
                        border: '2px solid red',
                        margin: '20px 0',
                        position: 'relative', // 确保在正常层级
                        zIndex: 1 // 避免被其他元素覆盖
                    }}
                />
                {/* 显示距离信息 */}
                {
                    distance && (
                        <div style={{
                            textAlign: 'left',
                            fontSize: '16px',
                            fontWeight: 'bold',
                            marginTop: '10px',
                            color: '#333',
                            whiteSpace: 'pre-wrap',
                            border: '0.01rem solid red'
                        }}>
                            {distance}
                        </div>
                    )
                }
            </div>
        </AnimatedTransition>
    )
}

export default Article;
